<template>
  <div>
        <el-menu
    default-active="$router.path"
    router
    class="el-menu-vertical-demo"
    active-text-color="green"
    background-color="rgb(7, 65, 127)"
    text-color="#fff"
    :collapse="flag"
    :collapse-transition="false"
    style="min-height: 100vh;
    background-color: rgb(7, 65, 127)">
    <!-- <el-menu-item>
      <i class="el-icon-milk-tea"></i>
        <span slot="title">生鲜采购系统</span>
      </el-menu-item> -->
      <div style="height: 60px; line-height: 60px;text-align: center;">
        <img src="../assets/logo.png" style="width: 20px;position: relative; top: 5px;margin-right: 5px;" >
        <span style="font-size: 18px; color: #fff;" v-if="!flag">可视化展示</span>
      </div>

      <el-menu-item index="/home">
        <i class="el-icon-location"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <menuList :menuList = "sidebar" :flag = "flag"></menuList>

    </el-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import menuList from './MenuList.vue'

export default {
  name: 'AsideVue',
  props: ['flag'],
  components: {
    menuList
  },

  data () {
    return {

    }
  },
  created () {
    console.log('动态导航栏：', this.sidebar)
  },
  computed: {
    ...mapState([
      'sidebar'
    ])
  },
  methods: {
    handleSelect (index) {
      console.log('====================', index)
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-aside {
    color: #333;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

</style>
